package com.example.jetpackcomposelayouts

import android.view.ContentInfo
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.DefaultAlpha
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

/**
 * Author：young
 * .
 * Time： 26/9/2023 下午9:57 周二
 * .
 * Desc：
 */

@Composable
fun PhotographerCard(modifier: Modifier = Modifier) {
    /*
        MaterialTheme.colorScheme.surface 和  MaterialTheme.colorScheme.onSurface 是成对出现的；
        例如：背景和文字，如果背景和文字是相同颜色，那就看不清了


        Modifier 修饰符是有顺序的问题的
        例如下面的 .clickable(onClick = {}) 和 .padding(16.dp) 调换顺序，水波纹包裹的范围是不一样的
     */
    Row(
        modifier = Modifier
            .clip(
                RoundedCornerShape(4.dp)
            )
            .background(MaterialTheme.colorScheme.surface)
            .clickable(onClick = {}) // 这里设置可点击，就有水波纹效果了，否则没有水波纹效果
            .padding(16.dp)
    ) {
        Surface(
            modifier = Modifier.size(50.dp),
            shape = CircleShape,
            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.2f)
        ) {
            Image(
                painter = painterResource(id = R.drawable.girl),
                contentDescription = null
            )
        }
        // 下面的图片效果是一样的
//        Image(
//            painter = painterResource(id = R.drawable.girl), // 加载本地图片
//            contentDescription = null, // 无障碍模式的时候的提示文案
//            contentScale = ContentScale.Crop, // 图片的缩放模式
//            modifier = Modifier
//                .size(44.dp, 44.dp)
//                .clip(CircleShape) // 设置裁剪图片，这里是裁剪成圆形
//        )
        Column(
            modifier = Modifier
                .padding(start = 8.dp) // 设置左边间距
                .align(Alignment.CenterVertically) // 设置子控件垂直居中
        ) {
            Text(text = "Alfred Sisley", fontWeight = FontWeight.Bold)

            // LocalContentAlpha provides ContentAlpha.medium 在高本本不存在了
            // https://www.saoniuhuo.com/question/detail-2418626.html
            CompositionLocalProvider(LocalContentColor provides LocalContentColor.current.copy(alpha = 0.2f)) {
                Text(text = "3 minutes ago", style = MaterialTheme.typography.bodyMedium)
            }
        }
    }
}